<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Columns with relatively positioned element</title>
    <style>
        @page {
            size: 500px 500px;
            margin: 0;
            bleed: 50px;
            marks: crop;
        }
        * {
            margin: 0;
        }
        :root {
            orphans: 1;
            widows: 1;
            column-count: 2;
            column-gap: 2em;
        }
        body {
            background: #EEEEEE;
        }
        div {
            background-color: #CCFFCC;
            line-height: 50px;
            position: relative;
            top: 50px;
            left: 20px;
        }
    </style>
</head>
<body>
<div>
    1<br>
    2<br>
    3<br>
    4<br>
    5<br>
    6<br>
    7<br>
    8<br>
    9<br>
    10<br>
    11<br>
    12<br>
    13<br>
    14<br>
    15<br>
    16<br>
    17<br>
    18<br>
    19<br>
    20<br>
    21<br>
    22<br>
    23<br>
    24<br>
    25<br>
    26<br>
    27<br>
    28<br>
    29<br>
    30
</div>
</body>
</html>